<template>
  <section class="component task-box">
    <data-box
      ref="databox"
      row-key="id"
      :data="taskDataSet"
      :stripe="false"
      :rowClassName="getRowClass"
      :page="pageService"
      @onPageChange="refreshData"
    >
      <template slot="columns">
        <el-table-column
          prop="taskType"
          label="类型"
          :min-width="$helper.getColumnWidth(4)"
          :formatter="row => $filter.dictConvert(row.taskType, 'TaskType')"
        >
        </el-table-column>
        <!-- <el-table-column
          prop="name"
          label="名称"
          :min-width="$helper.getColumnWidth(3)"
        >
        </el-table-column> -->
        <el-table-column
          prop="taskStatus"
          label="任务状态"
          align="center"
          :min-width="$helper.getColumnWidth(3)"
          :formatter="row => $filter.dictConvert(row.taskStatus, 'TaskStatus')"
        >
        </el-table-column>
        <el-table-column
          prop="description"
          label="任务描述"
          align="left"
          :show-overflow-tooltip="true"
          :min-width="$helper.getColumnWidth(6)"
        >
        </el-table-column>
        <el-table-column
          prop="startTime"
          label="开始时间"
          :min-width="$helper.getColumnWidth(5)"
          :formatter="row => $filter.dateTimeFormat(row.startTime)"
        >
        </el-table-column>
        <el-table-column
          prop="endTime"
          label="结束时间"
          :min-width="$helper.getColumnWidth(5)"
          :formatter="row => $filter.dateTimeFormat(row.endTime)"
        >
        </el-table-column>
        <el-table-column
          label="耗时"
          :min-width="$helper.getColumnWidth(5)"
          :formatter="row => $common.getDiffTime(row.startTime, row.endTime)"
        >
        </el-table-column>
        <el-table-column label="操作" :min-width="$helper.getColumnWidth(3)">
          <template slot-scope="scope">
            <el-button
              size="small"
              @click="downLoad(scope.row.logFileUrl, '任务日志')"
              type="text"
              v-if="scope.row.logFileUrl"
              >下载</el-button
            >
          </template>
        </el-table-column>
      </template>
    </data-box>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import { TaskBoxService } from "~/services/domain-service/task-box.service";
import { PageService } from "~/utils/page.service";
import { CommonService } from "~/utils/common.service";
import { State, Mutation, Action, namespace } from "vuex-class";
import DataBox from "~/components/common/data-box.vue";
import DataForm from "~/components/common/data-form.vue";
import { Prop, Watch } from "vue-property-decorator";

const workspaceModule = namespace("workspace");

@Component({
  components: {
    DataForm
  }
})
export default class MessageBox extends Vue {
  @Prop() public visible;
  @Dependencies(TaskBoxService)
  private taskBoxService: TaskBoxService;
  @Dependencies(PageService)
  private pageService: PageService;
  @workspaceModule.Action
  private updateUnReadCount;
  private taskDataSet: any[] = [];
  private downLoad: any = CommonService.downloadFile;
  private currentMessage: any = "";
  private interval: any;
  private hour: any = "";
  private minute: any = "";
  private second: any = "";
  private timestamp: any = "";
  private oo: any = "";

  @Watch("visible")
  private onVisibleChange(value) {
    if (value) {
      this.refreshData();
    }
  }

  /**
   * 刷新数据
   */
  private refreshData() {
    this.taskBoxService.query(this.pageService).subscribe(data => {
      this.taskDataSet = data;
    });
  }

  /**
   * 获取行样式
   */
  private getRowClass(scope, index) {
    return (scope.row.taskStatus as string).toLowerCase();
  }

  /**
   * 初始化
   */
  private mounted() {
    this.refreshData();
  }
}
</script>

<style lang="less">
.task-box.component {
  .data-box {
    .el-table__row {
      &.running {
        background-color: #f8f8c8 !important;
      }
      &.failure {
        background-color: #ffeeee !important;
      }
    }
  }
}
</style>
